<template>
	<view class="main">
		<view class="topcard">
			<view class="stop">
				<view class="title">
					可提现金额(¥)
					<image :src="see?'../../static/ico/ear.png':'../../static/ico/ears.png'" mode="aspectFit" class="ico" @click="tosee(see)"></image>
					
				</view>
				<view class="num">
					{{see?(mymoney*1).toFixed(2):'****'}}
				</view>
			</view>
			<view class="bottom" >
				<view class="left" @click="toPage('/pages/wallet/withdraw')">
					提现
				</view>
				<view class="line">
					
				</view>
				<view class="right" @click="toPage('/pages/wallet/add')">
					充值
				</view>
			</view>
		</view>
		<view class="tab">
			<view class="title">
				余额变动明细
			</view>
			<view class="tabright" @click="toPage('/pages/wallet/details')">
				全部
				<image class="icor" src="../../static/ico/lr.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="list">
			<view class="item fadeInUp" v-for="(item,i) in list" :key='i'  @click="topage(item)">
				<view class="left">
					<view class="title">
						{{item.title}}
					</view>
					<view class="num">
						{{item.create_time}}
					</view>
				</view>
				<view class="right">
					<view class="title">
						{{item.turnover}}
					</view>
					<view class="num">
						余额 {{item.money_proof}}
					</view>
				</view>
			</view>
		<block v-if="list.length<1">
			<Empty text="暂无数据" :type='0'></Empty>
		</block>
		</view>
	</view>
</template>

<script>
		import {mixin} from '@/Mixins/mixin.js'
			import Empty from '@/components/Empty.vue'
			import { mapState, mapMutations } from 'vuex'
	export default {
			mixins:[mixin],
			components: {Empty},
		data() {
			return {
				see:false,
				mymoney:0,
				page:1,
				size:10,
				list:[],
				total:0,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			this.mymoney=this.userInfo.money
			this.getList()
			this.getUser()
		},
		onPullDownRefresh(){
			this.page=1
			this.getList()
			this.getUser()
		},
		onReachBottom(){
			if(this.list.length<this.total){
				this.getList()
			}			
		},
		onBackPress(e) {
			uni.switchTab({
				url:'/pages/Mine/index'
			})
		    return true;//阻止默认返回行为
		},
		methods: {
			async getUser(){
				let data = await this.$http({
					url:this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{}
				})
				console.log('[用户信息]',data)
				if(data.code==200){
					this.$store.commit('ChangeUserInfo',data.data);
					this.mymoney=data.data.money
					// this.myGoodsList()
				}
			},
			tosee(e){
				this.see=!e
			},
			topage(e){
				uni.setStorage({
					key:'sinfo',
					data:e,
					success:()=> {
						uni.navigateTo({
							url:'/pages/wallet/info'
						})
					}
				})
			},
			async getList(){
				let data = await this.$http({
					url:this.$api.billList,
					method: 'get',
					hideLoading: true,
					data:{
						page:this.page,
						page_size:this.size,
						bill_type_id:0
					}
				})
				if(data.code==200){
					if(this.page==1){
						this.list = []
					}
					let list = data.data.list
					this.total=list.total
					if(this.list.length<list.total){
						this.list = this.list.concat(list.data)
						this.page +=1
					}		
				}else{
					return []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
 .main{
	 
	 .topcard{
		 width: 694rpx;
		 height: 242rpx;
		 background: linear-gradient(180deg, #474747 0%, #222222 100%);
		 margin: 10rpx auto;
		 border-radius: 16rpx;
		 display: flex;
		 align-items: flex-start;
		 flex-direction: column;
		 justify-content: space-between;
		 .ico{
			 width: 30rpx;
			 height: 20rpx;
			 margin-left: 10rpx;
		 }
		 .stop{
			 margin-left: 50rpx;
			 margin-top: 50rpx;
			 .title{
				 display: flex;
				 font-size: 24rpx;
				 font-weight: 400;
				 color: #FFFFFF;
				 line-height: 34rpx;
				 opacity: 0.8;
			 }
			 .num{
				 font-size: 48rpx;
				 font-weight: bold;
				 color: #FFFFFF;
				 line-height: 56rpx;
				 margin-top: 20rpx;
			 }
		 }
		.bottom{
		height: 76rpx;
		background: #6A6A6A;
		border-radius: 0 0 16rpx 16rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			font-size: 28rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 40rpx;
			flex: 1;
			text-align: center;
		} 
		.line{
			width: 2rpx;
			height: 30rpx;
			background: #D9B671;
		}
		 .right{
			 font-size: 28rpx;
			 font-weight: 600;
			 color: #FFFFFF;
			 line-height: 40rpx;
			 flex: 1;
			 text-align: center;
		 }
		 
		 }
	 }
	 
	 .tab{
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 padding:  32rpx;
		 .title{
			 font-size: 30rpx;
			 font-weight: 600;
			 color: #333333;
			 line-height: 40rpx;
		 }
		 .tabright{
			 font-size: 24rpx;
			 font-weight: 600;
			 color: #999999;
			 line-height: 34rpx;
			 .icor{
				 width: 22rpx;
				 height: 22rpx;
				 margin: 0 10rpx;
			 }
		 }
	 }
	 .list{
		 border-top: 1rpx solid #f5f5f5;
		 padding: 32rpx 32rpx;
		 .item{
			 display: flex;
			 align-items: center;
			justify-content: space-between;
			padding-bottom: 28rpx;
			margin-bottom: 28rpx;
			border-bottom: 1rpx solid #f5f5f5;
				.left{
				 display: flex;
				 flex-direction: column;
				 justify-content: flex-start;
				 }
				 .right{
					 display: flex;
					 flex-direction: column;
					 justify-content: flex-end;
					 align-items: flex-end;
				 }
				 .title{
					 font-size: 28rpx;
					 font-family: PingFangSC-Semibold, PingFang SC;
					 font-weight: 600;
					 color: #131415;
					 line-height: 40rpx;
					 margin: 5rpx 0;
				 }
				 .num{margin: 5rpx 0;
					 font-size: 22rpx;
					 font-family: PingFangSC-Semibold, PingFang SC;
					 font-weight: 600;
					 color: #999999;
					 line-height: 32rpx;
				 }
			 
		 }
	 }
 }
</style>
